<template>
  <el-dialog :title="!menu.id ? '新增菜单' : '修改菜单'" :visible.sync="visible">
    <el-form :model="menu" :rules="rules" ref="menuFrom" label-width="100px">
      <el-form-item label="菜单名称：" prop="title">
        <el-input v-model="menu.title"></el-input>
      </el-form-item>
      <el-form-item label="上级菜单：">
        <el-select v-model="menu.parentId" placeholder="请选择菜单">
          <el-option v-for="item in selectMenuList" :key="item.id" :label="item.title" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="前端名称：" prop="name">
        <el-input v-model="menu.name"></el-input>
      </el-form-item>
      <el-form-item label="前端路径：" prop="path">
        <el-input v-model="menu.path"></el-input>
      </el-form-item>
      <el-form-item label="组件路径：" prop="component">
        <el-input v-model="menu.component"></el-input>
      </el-form-item>
      <el-form-item label="前端图标：" prop="icon">
        <el-popover ref="iconListPopover" placement="bottom-start" trigger="click">
          <div class="mod-menu__icon-inner">
            <div class="mod-menu__icon-list">
              <el-button v-for="(item, index) in iconList" :key="index" @click="iconActiveHandle(item)"
                :class="{ 'is-active': item === menu.icon }">
                <svg-icon :iconClass="item"></svg-icon>
              </el-button>
            </div>
          </div>
        </el-popover>
        <el-input v-model="menu.icon" v-popover:iconListPopover :readonly="true" placeholder="请选择菜单图标"
          class="icon-list__input" style="width: 90%"></el-input>
        <svg-icon style="margin-left: 8px" :icon-class="menu.icon"></svg-icon>
      </el-form-item>
      <el-form-item label="是否显示：">
        <el-radio-group v-model="menu.hidden">
          <el-radio :label="0">是</el-radio>
          <el-radio :label="1">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="显示排序：">
        <el-input v-model="menu.sort"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onSubmit('menuFrom')" size="small">提交</el-button>
      <el-button @click="resetForm('menuFrom')" size="small">重置</el-button>
      <el-button @click="visible = false" size="small">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import Icon from '@/icons'
import { fetchList, createMenu, updateMenu, getMenu } from '@/api/sys/menu';

const defaultMenu = {
  title: '',
  parentId: 0,
  name: '',
  path: '',
  component: '',
  icon: '',
  hidden: 0,
  sort: 0
};
export default {
  data() {
    return {
      iconList: [],
      visible: false,
      menu: Object.assign({}, defaultMenu),
      selectMenuList: [],
      rules: {
        title: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' },
          { min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入前端名称', trigger: 'blur' },
          { min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur' }
        ],
        path: [
          { required: true, message: '请输入前端路径', trigger: 'blur' },
          { min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur' }
        ],
        icon: [
          { required: true, message: '请输入前端图标', trigger: 'blur' },
          { min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.iconList = Icon.getNameList()
  },
  methods: {
    
    init(id) {
      this.menu.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        if (this.$refs['menuFrom'] !== undefined) {
          this.$refs['menuFrom'].resetFields()
        }
      })
      if (!this.menu.id) {
        this.menu = Object.assign({}, defaultMenu);
      } else {
        getMenu(this.menu.id).then(response => {
          this.menu = response.data;
        });
      }
      this.getSelectMenuList();
    },

    // 图标选中
    iconActiveHandle(iconName) {
      this.menu.icon = iconName;
    },

    getSelectMenuList() {
      fetchList(0, { pageSize: 10, pageNum: 1 }).then(response => {
        this.selectMenuList = response.data.list;
        this.selectMenuList.unshift({ id: 0, title: '无上级菜单' });
      });
    },

    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.menu.id) {
            createMenu(this.menu).then(response => {
              this.$refs[formName].resetFields();
              this.resetForm(formName);
              this.$message({
                message: '提交成功',
                type: 'success',
                duration: 1000
              });
              this.visible = false;
              this.$emit('refreshDataList');
            });
          } else {
            updateMenu(this.menu.id, this.menu).then(response => {
              this.$message({
                message: '修改成功',
                type: 'success',
                duration: 1000
              });
              this.visible = false;
              this.$emit('refreshDataList');
            });
          }
        }
      });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.menu = Object.assign({}, defaultMenu);
      this.getSelectMenuList();
    },
  }
}
</script>

<style scoped>
.mod-menu__icon-inner {
  width: 550px;
  max-height: 370px;
  overflow-x: hidden;
  overflow-y: auto;
}
.mod-menu__icon-list {
  width: 550px;
  padding: 0;
}

.mod-menu__icon-list button{
  margin: 5px;
}
</style>